import { motion } from "framer-motion";
import { useEffect } from "react";
export default function StrongMotion({
  content,
  prefix = "",
  className = "",
  letter_delay = 0.025,
  duration = 0.125,
}) {
  useEffect(() => {}, []);
  return (
    <>
      {content.split("").map((letter, index) => {
        return (
          <motion.strong className="relative" key={`${content}-${index}`}>
            <motion.strong
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{
                delay: 0.3 + (index + prefix.length) * letter_delay,
                duration: 0,
              }}
              className={className}
            >
              {letter}
            </motion.strong>
            <motion.strong
              initial={{
                opacity: 0,
              }}
              animate={{
                opacity: [0, 1, 0],
              }}
              transition={{
                delay: 0.3 + (index + prefix.length) * letter_delay,
                times: [0, 0.1, 1],
                duration: duration * 3,
                ease: "easeInOut",
              }}
              className={
                "absolute bottom-[3px] left-[1px] right-0 top-[3px]  bg-neutral-950"
              }
            ></motion.strong>
          </motion.strong>
        );
      })}
    </>
  );
}
